<template>
  <div class="contents">
    <PanelTitle title="种源分析" />
    <div ref="maps" class="maps mt"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";
import { useBaseStore } from "@/stores/base";
const baseStore = useBaseStore()
const maps = ref(null);
onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/plant/medicinal/statist/list",
    method: "get",
    params: { baseId: baseStore.base.id },
  });
  

  let legendData = res.data.map((item) => {
    return item.medicinalName;
  });

  let pieData = res.data.map((item) => {
    return {
      value: item.acreage,
      name: item.medicinalName,
    };
  });

  var myChart = echarts.init(maps.value);
  myChart.setOption({
    legend: {
      icon: "rect",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      top: "bottom",
      data: legendData,
      textStyle: {
        fontSize: fitChartSize(8),
        color: "#fff",
      },
    },
    tooltip: {
        trigger: 'item'
      },
    // color: ["#00C0FF", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5"],
    title: {
      text: "单位：亩",
      textStyle: {
        fontSize: fitChartSize(9),
        fontWeight: "bold",
        color: "#fff",
      },
      right: fitChartSize(10),
      // subtext: 'Fake Data',
      // left: 'center'
    },
    series: [
      {
        type: "pie",
        radius: [50, 75],
        center: ["50%", "50%"],
        // roseType: "area",
        itemStyle: {
          // borderRadius: 5,
        },

        label: {
          show: true,
          borderWidth: 10,
          formatter: '{b} {d} %',
          color: '#fff'
        },
        data: pieData,
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-40);
  }
}

.maps {
  height: vh(190);
  width: 100%;
}
</style>